<template>
  <div class="calendar-box" :style='{ height: calHeight + "px" }'>
    <ul class="calendar-head">
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
      <li>日</li>
    </ul>
    <transition name="fade">
      <calendarContent ref="calendar_swiper" :checkDate="current_day" @on-change="changeIndex" @calendarHeight="calendarHeight">
        <div v-for="(month, index) in monthList" :key="index" class="month swiper-item">
          <ul v-for="(week, weekindex) in month" :key="weekindex">
            <li v-for="(day, dayindex) in week" :class="{ ischecked: checkedDay == day.date, istoday: day.istoday }" :key="dayindex" @click.prevent.stop="chooseDay(day.year, day.month, day.day, day.othermonth, day.mode)">
              <div class="week-day" :class="{ ischecked: checkedDay == day.date, othermonth: day.othermonth, istoday: day.istoday }">
                <span class="one-day">
                  <i v-if="day.istoday" class="day today">今</i>
                  <i v-else class="day">{{ day.day }}</i>
                </span>
                <div class="thing">
                  <template v-for="thing in day.thing">
                    <a :style="{ color: thing.color }" v-if="thing.title" :key="thing.title"></a>
                  </template>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </calendarContent>
    </transition>
    <div class="calendar-today">{{ formateTime }}</div>
    <div id='calendar-toggle-id' class="calendar-toggle">
      <div class="toggle-line"></div>
    </div>
  </div>
</template>
<script>
import calendarContent from './swiper-monthorweek.vue'
import format from './format'
import Utils from '../../utils/utils.js'
import { Toast } from 'vant'
import qs from 'qs'

export default {
  data () {
    return {
      disp_date: new Date(),
      today: new Date(),
      current_day: new Date(),
      monthList: [],
      checkedDay: '0000-00-00',
      can_click: true,
      calHeight: '', // 日历外框高度，自适应要用到,
      thingList: [],
      timer: null,
      currentCheckedDate: new Date(),
      activityDay: [], // 本月有拜访的日期数组
      bos: {}
    }
  },
  components: {
    calendarContent
  },
  computed: {
    // 当前选中日期
    formateTime () {
      // 标准时间转xxxx年xx月xx日
      return this.formatDateTime(this.disp_date)
    }
  },
  created () {
    // //console.log('this.disp_date', this.disp_date)
    // this.todayDate()
    // await this.loadActivityList()
  },
  mounted () {
    // //console.log('this.disp_date', this.disp_date, this.monthList)
  },
  methods: {
    functionB (date) {
      if (date) {
        let _thingsarr = []
        let _things = {}
        _things['checkedDate'] = date
        for (let i = 0; i < this.thingList.length; i++) {
          let activityData = this.thingList[i]
          if (activityData.date === this.formatDateTime(new Date(date))) {
            _thingsarr.push(activityData)
          }
        }
        _things['things'] = _thingsarr
        //console.log('-----_thing:' + JSON.stringify(_things))
        _things['bos'] = this.bos

        Utils.$emit('receiveThings', _things)
      }
    },
    async loadActivityList () {
      //console.log('loadActivityList')
      this.thingList = []
      // 获取所有事件
      let data = { checkedDay: this.checkedDay }
      await this.axios({
        method: 'post',
        url: '/api/bizcalendar.list.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log('resdata', res.data)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          let activityData = res.data.jsondata.fieldValue
          //console.log('raw list: ' + JSON.stringify(activityData))
          this.bos = res.data.jsondata.bos
          for (let i = 0; i < activityData.length; i++) {
            let data = activityData[i]
            if (data.activity_kssj) {
              let kssj = data.activity_kssj.substring(0, data.activity_kssj.lastIndexOf(' '))
              let jssj = data.activity_kssj.substring(0, data.activity_kssj.lastIndexOf(' '))
              let _sname = data.activity_sname
              let _label = data.label
              let _status = data.activity_state_enum

              if (_status === '待拜访') {
                _status = '<span style="color:#FF7F00">待拜访<span>'
              }

              if (_status === '签到完成') {
                _status = '<span style="color:#FAC858">签到完成<span>'
              }

              if (_status === '已完成') {
                _status = '<span style="color:#00CD00">已完成<span>'
              }

              this.thingList.push({ date: kssj, jssj: jssj, thing: { status: _status, sname: _sname, label: _label, itemid: data.activity_id, account: data.activity_idaccount_ref, bo: data.activity_sobject, boname: this.bos[data.activity_sobject] } })
            }
          }
          if (res.data.jsondata.activityDay) {
            this.activityDay = res.data.jsondata.activityDay
          }
          // this.get3month()
          this.functionB(this.checkedDay)
          //console.log('thingList执行完毕')
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    calendarHeight (newVal) {
      this.calHeight = newVal + 30
      // //console.log('---val---' + newVal)
    },
    currenttime () {
      let d = new Date()
      let year = d.getFullYear()
      let month = this.add0(d.getMonth() + 1)
      let day = this.add0(d.getDate())
      let hour = this.add0(d.getHours())
      let minute = this.add0(d.getMinutes())
      let second = this.add0(d.getSeconds())
      let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      return time
    },
    add0 (m) {
      return m < 10 ? '0' + m : m
    },
    todayDate () {
      this.checkedDay = this.formatDateTime(this.today)
    },
    async init () {
      //console.log('init')
      await this.loadActivityList()
      await this.get3week()
    },
    async chooseDay (year, month, day, othermonth, mode) {
      //console.log('chooseDay')
      // 把事件数据放到index.vue中的items里
      // this.functionB(year + '-' + (month + 1) + '-' + day)
      // 为了PC端点击事件和移动冲突
      if (!this.can_click) return
      this.current_day = new Date(year, month, day)
      this.checkedDay = this.format(year, month, day)
      this.currentCheckedDate = this.checkedDay
      await this.loadActivityList()
      if (othermonth && mode === 'month') {
        this.disp_date = this.current_day
        this.get3month()
        this.$refs.calendar_swiper.move_change()
        // this.changeIndex(othermonth, false, true)
      } else if (othermonth && mode === 'week') {
        this.disp_date = this.current_day
      } else {
        this.disp_date = this.current_day
      }
    },
    formatDateTime (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      var d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      // var h = date.getHours()
      // var minute = date.getMinutes()
      // minute = minute < 10 ? ('0' + minute) : minute
      return y + '-' + m + '-' + d
    },
    format (year, month, day) {
      month++
      month < 10 && (month = '0' + month)
      day < 10 && (day = '0' + day)
      return year + '-' + month + '-' + day
    },
    getWeek (year, month, day) {
      // //console.log('getweek', year, month, day)
      // year,month,day为选中当天的年月日
      var dt = new Date(year, month, day)
      var weekArr = []
      var dtFirst = new Date(year, month, day - ((dt.getDay() + 6) % 7))
      var week = []
      // 循环选中当天所在那一周的每一天
      for (var j = 0; j < 7; j++) {
        var newdt = new Date(dtFirst.getFullYear(), dtFirst.getMonth(), dtFirst.getDate() + j)
        var _year = newdt.getFullYear()
        var _month = newdt.getMonth()
        var _day = newdt.getDate()
        week.push({
          mode: 'week',
          day: _day,
          year: _year,
          month: _month,
          date: this.format(_year, _month, _day),
          // 日历要显示的其他内容
          thing: this.ifOrder(_year, _month, _day),
          nongli: format.solar2lunar(_year, _month + 1, _day),
          istoday: !!((this.today.getFullYear() === _year && this.today.getMonth() === _month && this.today.getDate() === _day)),
          ischecked: false,
          othermonth: _month !== month
        })
      }
      // //console.log('getMonthweek', year, month, j, week)
      weekArr.push(week)
      return weekArr
    },
    getMonth (year, month) { // 创建单月历
      var monthArr = []
      var dtFirst = new Date(year, month, 1) // 每个月第一天
      var dtLast = new Date(year, month + 1, 0) // 每个月最后一天
      var monthLength = dtLast.getDate() - dtFirst.getDate() + 1
      // var daylist = []
      var space = (dtFirst.getDay() - 1 + 7) % 7 // 月历前面空格
      for (var i = -space; i < 36; i += 7) {
        var week = []
        for (var j = 0; j < 7; j++) {
          var day = i + j + 1
          if (day > 0 && day <= monthLength) {
            week.push({
              mode: 'month',
              day: day,
              year: year,
              month: month,
              date: this.format(year, month, day),
              // 日历要显示的其他内容
              thing: this.ifOrder(year, month, day),
              nongli: format.solar2lunar(year, month + 1, day),
              istoday: !!((this.today.getFullYear() === year && this.today.getMonth() === month && this.today.getDate() === day)),
              ischecked: false
            })
          } else {
            // 其它月份
            var newdt = new Date(year, month, day)
            var _year = newdt.getFullYear()
            var _month = newdt.getMonth()
            var _day = newdt.getDate()
            week.push({
              mode: 'month',
              day: _day,
              year: _year,
              month: _month,
              date: this.format(year, month, day),
              thing: this.ifOrder(year, month, day),
              nongli: format.solar2lunar(_year, _month + 1, _day),
              istoday: !!((this.today.getFullYear() === _year && this.today.getMonth() === _month && this.today.getDate() === _day)),
              ischecked: false,
              othermonth: day <= 0 ? -1 : 1
            })
          }
        }
        monthArr.push(week)
        // //console.log('getMonthweek', year, month, i, j, week)
      }
      return monthArr
    },
    ifOrder (year, month, day) {
      let dateTime = this.format(year, month, day)
      // //console.log('ifOrder', year, month, day, this.activityDay, dateTime)
      for (let i = 0; i < this.activityDay.length; i++) {
        if (this.activityDay[i] && this.activityDay[i].indexOf(dateTime) >= 0) {
          return [{ title: '.' }]
        }
      }
      return []
    },
    get3month () {
      var year = this.disp_date.getFullYear()
      var month = this.disp_date.getMonth()
      this.monthList = []
      this.monthList.push(this.getMonth(year, month - 1))
      this.monthList.push(this.getMonth(year, month))
      this.monthList.push(this.getMonth(year, month + 1))
      // //console.log('get3month', this.monthList, this.disp_date, this.disp_date.getFullYear(), this.disp_date.getMonth())
    },
    async get3week () {
      var year = this.disp_date.getFullYear()
      var month = this.disp_date.getMonth()
      var day = this.disp_date.getDate()
      this.monthList = []
      this.monthList.push(this.getWeek(year, month, day - 7))
      this.monthList.push(this.getWeek(year, month, day))
      this.monthList.push(this.getWeek(year, month, day + 7))
      // //console.log('get3week', this.monthList, this.disp_date, this.disp_date.getFullYear(), this.disp_date.getMonth(), this.disp_date.getDate())
    },
    async changeIndex (index, isWeek, isClick = false) {
      //console.log('changeIndex')
      if (index) {
        if (isWeek) {
          this.disp_date = new Date(this.disp_date.getFullYear(), this.disp_date.getMonth(), this.disp_date.getDate() + (7 * (index)))
          this.checkedDay = this.format(this.disp_date.getFullYear(), this.disp_date.getMonth(), this.disp_date.getDate())
          this.current_day = this.disp_date
          await this.loadActivityList()
          await this.get3week()
          // this.functionB(this.checkedDay)
        } else {
          var _tmpdt = new Date(this.disp_date.getFullYear(), this.disp_date.getMonth() + index, 0)
          var maxday = _tmpdt.getDate()
          var _day = maxday < this.disp_date.getDate() ? maxday : this.disp_date.getDate()
          //console.log(_day)

          this.disp_date = new Date(this.disp_date.getFullYear(), this.disp_date.getMonth() + index, _day)
          if (!isClick) {
            this.checkedDay = this.format(this.disp_date.getFullYear(), this.disp_date.getMonth(), this.disp_date.getDate())
            //console.log(this.checkedDay)
          }
          await this.loadActivityList()
          this.get3month()
          // this.functionB(this.checkedDay)
          //console.log('move_change')
        }
        this.$refs.calendar_swiper.move_change()
      }
    }
  },
  async activated () {
    //console.log('activated')
    if (this.checkedDay === '0000-00-00') {
      this.todayDate()
    }
    // await this.loadActivityList()
  }
}
</script>
<style lang="less" scoped>
//@import "../../assets/css/m_base.less";
.calendar-box {
  position: relative;
  color: #fff;
  background: #fff;
  // height:100%;
  z-index: 99;
  transition: all .2s ease;
  overflow: hidden;
}

.calendar-head {
  /* background: #4188d8; */
  display: flex;
  height: 30px;
  line-height: 30px;
}

.calendar-head li {
  flex-grow: 1;
  text-align: center;
  color: #333;
  font-size: 0.7rem;
  font-family: Verdana, Geneva, sans-serif;
}

.calendar-today {
  position: absolute;
  width: 100%;
  height: 1rem;
  text-align: center;
  font-size: 15px;
  color: #333;
  z-index: 9;
  //bottom:0.2rem;
  bottom: 20px;
  background: #fff;
}

.calendar-toggle {
  position: absolute;
  width: 100%;
  height: 0.1rem;
  z-index: 9;
  bottom: 0.1rem;
  background: #fff;

  .toggle-line {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    //width: 0.3rem;
    width: 30px;
    height: 0.02rem;
    background: #D6D6D6;
    border-radius: 1px;
  }
}

.swiper-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.swiper-item:nth-child(1) {
  left: -100%;
}

.swiper-item:nth-child(2) {
  left: 0;
}

.swiper-item:nth-child(3) {
  left: 100%;
}

.month ul {
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 40px;
  min-height: 40px;
  border-right: 1px solid #eee;
}

.month li {
  flex: 1;
  flex-grow: 1;
  color: #333;
  overflow: hidden;
}

.week-day {
  position: relative;
  width: 38px;
  height: 38px;
  margin: auto;
  font-size: 12px;
  text-align: center;
  border: 0;
  line-height: 10px;
  overflow: hidden;
  border-top: 1px solid #fff;
  /* border-left: 1px solid #fff; */
  z-index: 1;
  /* height:140px; */
}

.week-day .one-day {}

.week-day i {
  display: block;
  text-align: center;
  font-size: 10px;
  font-style: normal;
  padding: 1px;
  line-height: 38px;
  height: 38px;
}

.week-day.ischecked {
  border-radius: 50px;
  color: #fff !important;
  background-image: linear-gradient(-128deg, #936BFA 0%, #4B52F4 90%);

  .thing a {
    color: #fff;
    background: #fff;
  }

  // transition: all .2s ease-in ;
}

.week-day.ischecked.istoday {
  .today {
    color: #fff;
  }
}

.thing {
  position: absolute;
  left: 50%;
  bottom: 0.02rem;
  transform: translateX(-50%);
  margin-top: 3px;
}

.thing a {
  cursor: pointer;
  display: block;
  width: 4px;
  height: 4px;
  word-break: break-all;
  line-height: 4px;
  color: #5054F4;
  background: #5054F4;
  border-radius: 50%;
}

.othermonth {
  color: #dcafaf;
}

.istoday {
  .today {
    font-size: 16px;
    color: #5054F4;
  }
}
</style>
